<template>
  <div class="app">
    <div class="head">
      <el-form :model="taskIds" label-width="80px" :rules="rules">
        <el-row :gutter="5">
          <el-col :span="5">
            <el-form-item label="中文名称" style="margin-bottom: 5px;" prop="companyChiName">
              <el-input v-model="taskIds.companyChiName" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="英文名称" style="margin-bottom: 5px;" prop="companyEngName">
              <el-input v-model="taskIds.companyEngName" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="注册类型" style="margin-bottom: 5px;" prop="registerType">
              <el-select v-model="taskIds.registerType" size="medium" class="input" @change="selectChange">
                <el-option
                  v-for="item in registerTypeOptions"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="产权码" style="margin-bottom: 5px;" prop="cmhkId">
              <el-input disabled v-model="taskIds.cmhkId" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div style="margin-top: 3px; display: flex">
              <el-button size="small" @click="showDocument">档案关联</el-button>
              <el-button type="primary" size="small" @click="handleSave">提交</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <div ref="fileView" class="file-view">
        <el-scrollbar style="height:100%">
          <pdf ref="pdf" :src="fileList.cos_url" :page="currentPage" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
          <div class="icon-btn">
            <div class="icon-btn-box">
              <cm-icon @click="changePdfPage(0)" class="icon-left" :class="{ grey: currentPage == 1 }" />
            </div>
            <div class="icon-btn-box">
              <cm-icon @click="changePdfPage(1)" class="icon-right" :class="{ grey: currentPage == pageCount }" />
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="icon-box">
        <div class="icon-hide">
          <cm-icon @click="handleHide" class="icon-left" v-if="!ifShow" />
          <cm-icon @click="handleShow" class="icon-right" v-if="ifShow" />
        </div>
      </div>
      <div ref="tableView" class="table-view">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="管控信息" name="second" v-if="ifControl" :key="2">
            <div class="box-card">
              <controlMsg ref="controlMsg" @send-cmhkId="getCmhkId" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="注册信息" name="first" v-if="ifRegister" :key="1">
            <div class="box-card">
              <registerMsg ref="registerMsg" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="治理机构" name="third" v-if="ifManage" :key="3">
            <div class="box-card">
              <governingBody ref="governingBody" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="股份类别" name="fourth" v-if="ifShares" :key="4">
            <div class="box-card">
              <shareType ref="shareType" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="股东持股" name="sixth" v-if="ifShareMsg" :key="6">
            <div class="box-card">
              <shareMsg ref="shareMsg" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="出资情况" name="seventh" v-if="ifOutmoney" :key="7">
            <div class="box-card">
              <outMoney ref="outMoney" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="合伙人列表（出资情况）" name="eightth" v-if="ifFriends" :key="8">
            <div class="box-card">
              <partner ref="partner" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="基本信息" name="nineth" v-if="ifBranch" :key="9">
            <div class="box-card">
              <basicMsg ref="basicMsg" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <document :dialogData="dialogData" @on-close="closeDialog" />
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import registerMsg from './components/registerMsg'
import controlMsg from './components/controlMsg'
import governingBody from './components/governingBody'
import shareType from './components/shareType.vue'
import shareMsg from './components/shareMsg'
import outMoney from './components/outMoney'
import partner from './components/partner'
import basicMsg from './components/basicMsg'
import document from './components/document'
import { handleSubmit } from '@/api/modules/propertyRight.js'
import { checkNoFont } from '@/utils/pattern.js'
export default {
  components: {
    pdf,
    registerMsg,
    controlMsg,
    governingBody,
    shareType,
    shareMsg,
    outMoney,
    partner,
    basicMsg,
    document
  },
  data() {
    return {
      taskIds: {
        taskId: '',
        resource: '',
        registerType: '',
        companyChiName: '',
        companyEngName: '',
        cmhkId: ''
      },
      registerTypeOptions: [
        {
          value: '0',
          label: '请选择'
        },{
          value: '01',
          label: '股份有限公司'
        },{
          value: '02',
          label: '有限责任公司'
        },{
          value: '03',
          label: '非公司制法人企业'
        },{
          value: '04',
          label: '合伙企业'
        },{
          value: '05',
          label: '分支机构'
        }
      ],
      activeName: '',
      ifRegister: false,
      ifControl: false,
      ifManage: false,
      ifShares: false,
      ifShareMsg: false,
      ifOutmoney: false,
      ifFriends: false,
      ifBranch: false,
      fileList: {},
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      ifShow: true,
      // 档案关联弹窗参数
      dialogData: {
        dialogVisible: false,
        taskId: ''
      },
      rules: {
        companyEngName: [{ validator: checkNoFont, trigger: 'change' }]
      }
    }
  },
  mounted() {
    const engName = this.$route.query.companyEngName
    if (engName != null) {
      this.taskIds.companyChiName = ''
      this.taskIds.companyEngName = this.$route.query.companyEngName
    } else {
      this.taskIds.companyChiName = this.$route.query.companyChiName
    }
    this.taskIds.taskId = this.$route.query.taskId
    this.taskIds.resource = this.$route.query.resource
    this.taskIds.registerType = this.$route.query.registerType
    this.dialogData.taskId = this.$route.query.taskId
    this.fileList = this.$route.query.url || {}
    if (this.taskIds.registerType === '01') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = true
        this.ifShareMsg = true
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.addinput() // 若为股份有限公司注册信息相关表单项显示
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (this.taskIds.registerType === '02') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (this.taskIds.registerType === '03') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (this.taskIds.registerType === '04') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = true
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.governingBody.ispartner() // 若为合伙企业则治理机构只显示管理层
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (this.taskIds.registerType === '05') {
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = true
        this.ifOutmoney = false
        this.activeName = 'nineth'
        this.$nextTick(() => {
          this.$refs.basicMsg.getBranchMsg(this.taskIds) // 查询基本信息
          this.$refs.basicMsg.cmbusinessTypes() // 查询基本信息下拉框数据
        })
      } else {
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
      }
  },
  methods: {
    selectChange(val) {
      console.log(val)
      this.taskIds.registerType = val
      if (val === '01') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = true
        this.ifShareMsg = true
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.addinput() // 若为股份有限公司注册信息相关表单项显示
          this.$refs.registerMsg.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (val === '02') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.registerMsg.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (val === '03') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = true
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.registerMsg.partnerDel()
          this.$refs.governingBody.notpartner()
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (val === '04') {
        this.ifRegister = true
        this.ifControl = true
        this.ifManage = true
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = true
        this.ifBranch = false
        this.ifOutmoney = false
        this.activeName = 'second'
        this.$nextTick(() => {
          this.$refs.registerMsg.delinput() // 若为有限责任公司注册信息相关表单项隐藏
          this.$refs.governingBody.ispartner() // 若为合伙企业则治理机构只显示管理层
          this.$refs.registerMsg.partnerAdd() // 若为合伙企业则添加三个字段
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        })
      } else if (val === '05') {
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = true
        this.ifOutmoney = false
        this.activeName = 'nineth'
        this.$nextTick(() => {
          this.$refs.basicMsg.getBranchMsg(this.taskIds) // 查询基本信息
          this.$refs.basicMsg.cmbusinessTypes() // 查询基本信息下拉框数据
        })
      } else {
        this.ifRegister = false
        this.ifControl = false
        this.ifManage = false
        this.ifShares = false
        this.ifShareMsg = false
        this.ifFriends = false
        this.ifBranch = false
        this.ifOutmoney = false
      }
    },
    handleClick(val) {
      console.log(val.label)
      switch (val.label) {
        case '管控信息':
          this.$refs.controlMsg.getcontrolMsgForm(this.taskIds) // 查询管控信息
        break
        case '注册信息':
          this.$refs.registerMsg.getRegisterinfo(this.taskIds) // 查询注册信息
          this.$refs.registerMsg.getOption() // 查询注册信息下拉框数据
        break
        case '基本信息':
          this.$refs.basicMsg.getBranchMsg(this.taskIds) // 查询基本信息
          this.$refs.basicMsg.cmbusinessTypes() // 查询基本信息下拉框数据
        break
        case '治理机构':
          this.$refs.governingBody.getGovermentMsg(this.taskIds) // 查询治理机构
        break
        case '股份类别':
          this.$refs.shareType.getShareType(this.taskIds) // 查询股份类别
        break
        case '股东持股':
          this.$refs.shareMsg.getShareMsg(this.taskIds) // 查询股东信息
        break
        case '出资情况':
          this.$refs.outMoney.getOutMoneyMsg(this.taskIds) // 查询出资情况
        break
        case '合伙人列表（出资情况）':
          this.$refs.partner.getPartner(this.taskIds) // 查询合伙人列表
        break

      }
    },
    changePdfPage (val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 点击隐藏文件域
    handleHide() {
      this.$refs.fileView.style.width = 0
      this.$refs.tableView.style.width = 'calc(100% - 15px)'
      this.ifShow = true
    },
    handleShow() {
      this.$refs.fileView.style.width = '35%'
      this.$refs.tableView.style.width = '65%'
      this.ifShow = false
    },
    // 点击提交
    handleSave() {
      this.$confirm('确认提交', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.taskIds.registerType === '') {
          this.$message.error('请选择注册类型')
        } else if (this.taskIds.companyChiName === '' && this.taskIds.companyEngName === '') {
          this.$message.error('中文名和英文名不能同时为空')
        } else {
          handleSubmit(this.taskIds).then(res => {
            if (res.data.code === '0') {
              this.$message.success('提交成功')
              this.$router.push('/propertyRegister')
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        })
      })
    },
    // 档案关联
    showDocument() {
      this.dialogData.dialogVisible = true
    },
    closeDialog() {
      this.dialogData.dialogVisible = false
    },
    getCmhkId(data) {
      this.taskIds.cmhkId = data
    }
  }
}
</script>

<style lang="less" scoped>
  .app {
    height: calc(100vh - 60px);
    .head {
      width: calc(100% - 60px);
      background-color: #ffffff;
      padding: 10px 30px;
      .input {
        width: 100%;
      }
    }
    .content {
      display: flex;
      width: calc(100% - 0px);
      height: calc(100% - 90px);
      background-color: #ffffff;
      margin-top: 10px;
      .icon-box {
        height: 100%;
        display: flex;
        align-items: center;
      }
      .file-view {
        width: 0%;
        height: 100%;
        overflow: auto;
        position: relative;
        .icon-btn {
          width: 100%;
          height: 40px;
          line-height: 40px;
          display: flex;
          background-color: #f0f0f0;
          .icon-btn-box {
            width: 50%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .grey {
            display: none;
          }
        }
      }
      .icon-hide {
        width: 15px !important;
        height: 15px;
      }
      .table-view {
        width: calc(100% - 15px);
      }
      .box-card {
        height: calc(100vh - 225px);
        overflow: auto;
      }
    }
  }
</style>
<style>
  .el-card {
    border: none;
  }
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    margin-left: 20px;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }
  body .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
